<template>
  <div class="box">
    <div class="flex-top">
      <span>十四届四次</span>
      <a-button type="primary">保存设置</a-button>
    </div>
    <div class="content">
      <div class="left">
        <p>
          <span>序号</span>
          <span>节点名称</span>
        </p>
        <ul>
          <li
            :class="{ active: activeKey === item.key }"
            v-for="item in itemKeyList"
            :key="item.id"
          >
            <div>
              <span>{{ item.id }}</span>
            </div>
            <a-input
              :ref="`input${item.key}`"
              v-show="item.blur || item.name == ''"
              placeholder="输入节点名称"
              v-model="item.name"
              @blur="itmeBulr(item)"
            />
            <p
              @click="activeKey = item.key"
              v-show="!(item.blur || item.name == '')"
            >
              {{ item.name }}
            </p>
            <i
              v-show="!(item.blur || item.name == '')"
              @click="changeItem(item)"
              class="suncnui suncnui-icon-bianji1"
            ></i>
            <i
              @click="deleteItem"
              v-show="item.key === itemKeyList.length"
              class="suncnui suncnui-icon-delete"
            ></i>
          </li>
        </ul>
        <a-button type="primary" @click="addItemKey">+添加节点</a-button>
      </div>
      <div class="right">
        <div class="top">
          <section-title>基本信息</section-title>
          <span>
            <i
              @click="choiceVisible = true"
              class="suncnui suncnui-icon-jiahao"
            ></i>
            添加人员</span
          >
        </div>
        <a-table :columns="columns" :data-source="data" :pagination="false">
          <span slot="customTitle">
            <a-radio
              @change="
                type2 = false
                type3 = false
              "
              v-model="type1"
              >随机</a-radio
            >
          </span>
          <span slot="customTitle2">
            <a-radio
              @change="
                type1 = false
                type3 = false
              "
              v-model="type2"
              >动态分配</a-radio
            >
          </span>
          <span slot="customTitle3">
            <a-radio
              @change="
                type2 = false
                type1 = false
              "
              v-model="type3"
              >按照提案类型</a-radio
            >
          </span>
          <span slot="action"> 删除 </span>
          <span slot="action2">
            <a-input style="width: 40px; margin-right: 6px"></a-input>件
            <a-radio>机动</a-radio>
          </span>
          <span slot="action3">
            <proposal-type-select
              style="width: 180px"
              placeholder="=提案类别="
            />
          </span>
        </a-table>
        <div class="section-content" style="margin-top: 20px">
          <div class="audit-mode-tip">
            <div class="audit-mode-item">
              <label style="color: red; margin-right: 5px">*</label
              >随机，审核人员可从所有待审核提案中选择提案进行审核。
            </div>
            <div class="audit-mode-item">
              <label style="color: red; margin-right: 5px">*</label
              >动态分配，将待审提案平均分摊到所有审核人，可手动调整每个人的审核件数，设置机动人员，审核额外新增的提案。
            </div>
            <div class="audit-mode-item">
              <label style="color: red; margin-right: 5px">*</label
              >按提案类型，提案按照审核人员的序号被依次审核后，才能进入下一个审核节点。
            </div>
          </div>
        </div>
        <section-title>审核方式</section-title>
        <div class="audit-mode">
          <p>
            <a-radio>并行审核</a-radio
            ><span>*</span
            >提案被其中任意一个审核人员审核后，直接进入下一个审核节点。
          </p>
          <p>
            <a-radio>串联审核</a-radio
            ><span>*</span
            >提案按照审核人员的序号被依次审核后，才能进入下一个审核节点。
          </p>
          <ul>
            <li>
              <a-input style="width: 40px; margin-right: 6px"></a-input>wuzc01
            </li>
            <li>
              <a-input style="width: 40px; margin-right: 6px"></a-input>wuzc02
            </li>
            <li>
              <a-input style="width: 40px; margin-right: 6px"></a-input>wuzc03
            </li>
          </ul>
        </div>
        <section-title>退回审核</section-title>
        <div class="audit-mode">
          <a-radio-group name="radioGroup" :default-value="1">
            <a-radio :value="1"> 不允许退回 </a-radio>
            <a-radio :value="2"> 允许退回到上一个审核节点 </a-radio>
            <a-radio :value="3"> 允许退回到第一个审核节点 </a-radio>
          </a-radio-group>
        </div>
      </div>
    </div>
    <choice-modal :visible.sync="choiceVisible" />
  </div>
</template>
<script>
const columns = [
  {
    title: '审核人',
    key: 'tags',
    dataIndex: 'tags'
  },
  {
    dataIndex: 'name',
    key: 'name',
    slots: { title: 'customTitle' }
  },
  {
    dataIndex: 'age',
    slots: { title: 'customTitle2' },
    key: 'age',
    scopedSlots: { customRender: 'action2' }
  },
  {
    dataIndex: 'address',
    slots: { title: 'customTitle3' },
    key: 'address',
    scopedSlots: { customRender: 'action3' }
  },

  {
    title: '操作',
    key: 'action',
    scopedSlots: { customRender: 'action' }
  }
]

const data = [
  {
    key: '1',
    name: '',
    age: 32,
    address: 'New York No. 1 Lake Park',
    tags: ['nice', 'developer']
  },
  {
    key: '2',
    name: '',
    age: 42,
    address: 'London No. 1 Lake Park',
    tags: ['loser']
  },
  {
    key: '3',
    name: '',
    age: 32,
    address: 'Sidney No. 1 Lake Park',
    tags: ['cool', 'teacher']
  }
]
import choiceModal from 'components/base/choiceModal'
import proposalTypeSelect from 'components/form/proposalTypeSelect'
export default {
  data() {
    return {
      activeKey: 1,
      choiceVisible: false,
      itemKeyList: [
        {
          key: 1,
          id: 1,
          name: '',
          blur: false
        }
      ],
      data,
      columns,
      type1: false,
      type2: false,
      type3: false
    }
  },
  components: { choiceModal, proposalTypeSelect },
  methods: {
    addItemKey() {
      this.itemKeyList.push({
        key: this.itemKeyList.length + 1,
        id: this.itemKeyList.length + 1,
        name: '',
        blur: false
      })
    },
    deleteItem() {
      if (this.itemKeyList.length <= 1) {
        this.$message.error('首行节点不允许进行删除')
        return
      }
      this.itemKeyList.pop()
    },
    changeItem(item) {
      item.blur = true
      this.$nextTick((res) => {
        this.$refs[`input${item.key}`][0].focus()
      })
    },
    itmeBulr(item) {
      item.blur = false
    }
  }
}
</script>
<style lang="less" scoped>
.box{
  height: 100%;
}
.flex-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 15px 15px 15px;
}
.content {
  display: flex;
  height: calc(100% - 69px);
}
.suncnui {
  cursor: pointer;
  margin: 0 5px;
}
.right {
  flex-grow: 1;
}
.left {
  flex-shrink: 0;
  background: #f5f5f5;
  width: 370px;
  height: 100%;
  min-height: 500px;
  overflow: hidden;
  overflow-y: auto;
  padding: 20px 15px 0;
  box-sizing: border-box;
  text-align: center;
  .ant-btn {
    width: 340px;
    height: 42px;
    line-height: 42px;
    font-size: 16px;
    margin: 0 auto;
  }
  > p {
    height: 30px;
    border-radius: 5px;
    background: #e9e9e9;
    line-height: 30px;
    box-sizing: border-box;
    padding-right: 45px;
    span {
      display: inline-block;
      &:nth-of-type(1) {
        width: 30%;
      }
      &:nth-of-type(2) {
        width: 67.7%;
      }
    }
  }
  ul {
    margin-bottom: 60px;
    li {
      width: 100%;
      align-items: center;
      margin-top: 30px;
      display: flex;
      > div {
        width: 90px;
        text-align: center;
        flex-shrink: 0;
      }
      span {
        height: 20px;
        line-height: 18px;
        border-width: 1px;
        border-style: solid;
        border-color: @base-color;
        color: @base-color;
        display: inline-block;
        padding: 0 6px;
        font-size: 12px;
        text-align: center;
        border-radius: 2px;
      }
      .ant-input,
      p {
        height: 40px;
        line-height: 40px;
        font-size: 20px;
        width: 199px;
        flex-shrink: 0;
      }
      .ant-input {
      }
      p {
        background: #f0f5f9;
        border: 1px solid #097bc7;
        color: #097bc7;
        border-radius: 2px;
        cursor: pointer;
      }
      .suncnui-icon-bianji1 {
        font-size: 18px;
        color: #097bc7;
      }
      .suncnui-icon-delete {
        font-size: 18px;
        color: #f53131;
      }
    }
    .active {
      p {
        background: #097bc7;
        color: #ffffff;
      }
    }
  }
}

.right {
  padding: 0 15px;
  > .top {
    position: relative;
    span {
      position: absolute;
      top: 10px;
      right: 10px;
      font-size: 14px;
      color: #1075c6;
    }
  }
  .section-content {
    padding: 20px 10px 5px 25px;
    box-sizing: border-box;
    background: #f7f7f7;
    .audit-mode-tip .audit-mode-item {
      margin-bottom: 13px;
      color: #767676;
    }
  }
  ul {
    margin-left: 60px;
    margin-top: 20px;
  }
  li {
    display: inline-block;
    margin-right: 20px;
  }
  .audit-mode {
    padding: 0 0 20px 10px;
    box-sizing: border-box;
    p {
      margin-top: 30px;
      > span {
        color: red;
        margin-right: 5px;
      }
    }
    .ant-radio-wrapper {
      font-size: 16px;
    }
  }
}
</style>